<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">教练列表</block>
		</cu-custom>
		<view>
			<view class="fixed w-100" :style="{zIndex: 999}">
				<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="searchKey" placeholder="输入搜索的关键词" confirm-type="search"></input>
					</view>
					<view class="action">
						<button class="cu-btn bg-main  round" @tap="search">搜索</button>
					</view>
				</view>
			</view>
			<view :style="{paddingTop: StatusBar+'px'}">
				<view class="cu-item shadow bg-white padding margin-top" v-for="(jl,index) in ajiaolians" :key="index"
					@tap="navigateToJlDetail(jl.jlid)">
					<view class="cu-list menu-avatar">
						<view class=" flex align-center ">
							<view class="cu-avatar round xl" :style="{backgroundImage: `url(${jl.jcover})`}"></view>
							<view class="content flex-sub margin-left-sm">
								<view class="flex justify-between ">
									<view>{{jl.jlname ? jl.jlname : "这个老师很懒，未设置昵称"}}</view>
								</view>
								<view class="flex justify-end">
									<view v-for="(lxid, index) in jl.lx" :key="index"
										class="cu-tag round df bg-main margin-left-sm">{{lxmap[lxid].lxname}}</view>
								</view>
								<view class="flex justify-between align-center margin-top-xs">
									<view class="text-grey">已开{{jl.kcs}}节课</view>
									<uni-rate size="15" readonly="true" v-model="jl.count" max="5"></uni-rate>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="this.ajiaolians.length < pageInfo.total" class="padding flex flex-direction">
					<button class="cu-btn bg-main lg" @tap="loadMore">显示更多</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				searchKey: "",
				astoreid: "",
				ajiaolians: [],
				mds: this.location.mds,
				pageInfo: {
					current: 1,
					total: 0,
					size: 12
				},
				lxmap: this.constant.lxmap,
			}
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		onLoad: function(option) {
			if (option.mdid) {
				this.astoreid = option.mdid;
			}
			if (option.aroomid) {
				this.aroomid = option.aroomid;
			}
			this.search();
		},
		methods: {
			navigateToJlDetail(jlid) {
				uni.navigateTo({
					url: "/pages/cxy/jl/jlxx?jlid=" + jlid
				})
			},
			loadJL: function() {
				this.api("/jl/page").send({
					astoreid: this.astoreid,
					aroomid: this.aroomid,
					current: this.pageInfo.current,
					size: this.pageInfo.size,
					jlname: this.searchKey
				}).then(res => {
					console.log(res);
					for (let index in res.ajiaolians.records) {
						let record = res.ajiaolians.records[index];
						if (record.lx) {
							record.lx = JSON.parse(record.lx);
						} else {
							record.lx = [];
						}
						
						this.ajiaolians.push(record);
					}
					this.pageInfo.total = res.ajiaolians.total;
				})
			},
			search: function() {
				this.ajiaolians = [];
				this.pageInfo.current = 1;
				this.loadJL();
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadJL();
			}
		}
	}
</script>

<style>
</style>